<script lang="ts" setup name="CallbackPatch">
import {
  mobileRule,
  codeRule,
  accountRule,
  passwordRule,
  rePasswordRule,
} from '@/utils/validate'
import { useField, useForm } from 'vee-validate'
import useStore from '@/store'
import { useCountDown } from '@/utils/hooks'
import { useRouter } from 'vue-router'
import Message from '@/components/message'
const router = useRouter()
const { user } = useStore()
const { time, start } = useCountDown(60)
const isLogin = QC.Login.check()
let openId = ''
if (isLogin) {
  // 获取openId
  QC.Login.getMe((id) => {
    openId = id
  })
}
// 表单校验
const { validate } = useForm({
  validationSchema: {
    account: accountRule,
    mobile: mobileRule,
    code: codeRule,
    password: passwordRule,
    rePassword: rePasswordRule,
  },
})
const { value: accountValue, errorMessage: accountError } =
  useField<string>('account')
const {
  value: mobileValue,
  errorMessage: mobileError,
  validate: mobileValid,
} = useField<string>('mobile')
const { value: codeValue, errorMessage: codeError } = useField<number>('code')
const { value: passwordValue, errorMessage: passwordError } =
  useField<string>('password')
const { value: rePasswordValue, errorMessage: rePasswordError } =
  useField<string>('rePassword')

//发送验证码
const send = async () => {
  if (time.value > 0) return
  const res = await mobileValid()
  if (!res.valid) return
  user.sendQQPathMsg(mobileValue.value)
  Message.success('获取验证码成功')
  start()
}
// 提交按钮
const submit = async () => {
  const res = await validate()
  if (!res.valid) return
  await user.qqPatchLogin({
    openId,
    account: accountValue.value,
    mobile: mobileValue.value,
    code: codeValue.value,
    password: passwordValue.value,
  })
  Message.success('注册成功')
  router.push('/')
}
</script>
<template>
  <div class="xtx-form">
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-user"></i>
        <input
          class="input"
          type="text"
          placeholder="请输入用户名"
          v-model="accountValue"
        />
      </div>
      <div class="error">{{ accountError }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-phone"></i>
        <input
          class="input"
          type="text"
          placeholder="请输入手机号"
          v-model="mobileValue"
        />
      </div>
      <div class="error">{{ mobileError }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-code"></i>
        <input
          class="input"
          type="text"
          placeholder="请输入验证码"
          v-model="codeValue"
        />
        <span class="code" @click="send">发送验证码</span>
      </div>
      <div class="error">{{ codeError }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <input
          class="input"
          type="password"
          placeholder="请输入密码"
          v-model="passwordValue"
        />
      </div>
      <div class="error">{{ passwordError }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <input
          class="input"
          type="password"
          placeholder="请确认密码"
          v-model="rePasswordValue"
        />
      </div>
      <div class="error">{{ rePasswordError }}</div>
    </div>
    <a href="javascript:;" class="submit" @click="submit">立即提交</a>
  </div>
</template>

<style scoped lang="less">
.code {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 50px;
  width: 80px;
  color: #999;
  &:hover {
    cursor: pointer;
  }
}
</style>
